<template>
  <view class="dynamic-inputs-container">
    <!-- 遍历输入配置，为每个配置创建一个输入框 -->
    <view
      v-for="(item, index) in localInputConfigs"
      :key="index"
      class="select-wrapper arrow-icon-groud"
    >
      <!-- 使用 UtilsComponent 获取数据 -->
      <utils-component
        :functionName="item.functionName"
        @data="(data) => updatePickerRange(data, index)"
      ></utils-component>
      <!-- 创建输入框 -->
      <u-form-item :label="item.label" class="form-item" label-width="120">
        <u--input
          class="custom-input"
          v-model="item.selectedValue"
          :placeholder="item.placeholder"
          suffixIcon="arrow-down"
          suffixIconStyle="color: #127DCA;font-size: 28rpx;"
          :customStyle="{
            height: '52rpx',
            borderRadius: '10rpx',
            lineHeight: '52rpx',
            backgroundColor: '#fff',
          }"
          :clearable="true"
          @focus="() => handleInputFocus(index)"
          @clear="() => handleClear(index)"
        >
        </u--input>
      </u-form-item>
    </view>
    <!-- 选择器组件 -->
    <u-picker
      :show="show"
      :columns="columns"
      @change="onChange"
      @confirm="confirm"
      @cancel="cancelPicker"
    ></u-picker>
  </view>
</template>

<script>
// 移 axios 导入
import UtilsComponent from "./UtilsComponent.vue";

export default {
  name: "DynamicInputs",
  components: {
    UtilsComponent, // 注册 UtilsComponent
  },
  props: {
    // 定义输入配置的属性
    label: {
      type: String,
      required: true,
    },
    inputConfigs: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(
          (item) =>
            (typeof item.apiurl === "string" ||
              typeof item.functionName === "string") && // 修改验证逻辑
            typeof item.label === "string" &&
            typeof item.value === "string" &&
            typeof item.placeholder === "string" &&
            (typeof item.houtaiurl === "string" || item.houtaiurl === undefined)
        );
      },
    },
  },
  data() {
    return {
      show: false, // 控制选择器的显示
      columns: [], // 选择器的列数据
      currentInputIndex: 0, // 当前操作的输入框索引
      localInputConfigs: [], // 本地输入配置，用于管理状态
    };
  },
  created() {
    this.initInputConfigs();
    this.fetchDataFromApi(); // 新增：初始化时从 API 获取数据
  },
  methods: {
    // 初始化本地输入配置
    initInputConfigs() {
      this.localInputConfigs = this.inputConfigs.map((config) => ({
        ...config,
        selectedValue: "",
        data: [],
        functionName: config.functionName || "", // 为 functionName 提供默认值
      }));
    },
    // 新增：从 API 获取数据
    fetchDataFromApi() {
      this.localInputConfigs.forEach((config, index) => {
        if (config.apiurl && config.label && config.value) {
          uni.request({
            url: config.apiurl,
            method: "GET",
            success: (response) => {
              const data = response.data.map((item) => ({
                label: this.getNestedValue(item, config.label),
                value: this.getNestedValue(item, config.value),
              }));
              this.updatePickerRange(data, index);
            },
            fail: (error) => {
              console.error(
                `Error fetching data from API: ${config.apiurl}`,
                error
              );
            },
          });
        }
      });
    },
    // 更新选择器范围
    updatePickerRange(data, index) {
      console.log(`更新选择器范围，索引: ${index}`, data);
      if (Array.isArray(data)) {
        this.$set(this.localInputConfigs[index], "data", data);
        const labels = data.map((item) => item.label);
        this.columns = [labels];
      } else {
        console.error(`updatePickerRange: 接收到的数据不是数组`, data);
        this.columns = [[]];
      }
    },
    // 显示选择器
    showPicker(index) {
      console.log(
        "showPicker 被调用，索引:",
        index,
        "函数名:",
        this.localInputConfigs[index].functionName
      );
      this.currentInputIndex = index;
      // 设置选择器的列数据
      this.columns = [
        this.localInputConfigs[index].data.map((item) => item.label),
      ];
      this.show = true;
    },
    // 处理输入框获得焦点
    handleInputFocus(index) {
      const config = this.localInputConfigs[index];
      console.log("输入框获得焦点，索引:", index, "配置:", config);

      if (config.functionName) {
        this.showPicker(index);
      } else if (config.apiurl && config.label && config.value) {
        uni.request({
          url: config.apiurl,
          method: "GET",
          success: (response) => {
            try {
              const parsedData = response.data;
              console.log("完整的返回数据:", parsedData);

              // 提取 data 字段中的数据
              const data = parsedData.data.map((item) => ({
                label: this.getNestedValue(item, config.label),
                value: this.getNestedValue(item, config.value),
              }));
              console.log("提取后的数据:", data);

              this.updatePickerRange(data, index);
              this.showPicker(index);
            } catch (error) {
              console.error("数据处理错误:", error);
            }
          },
          fail: (error) => {
            console.error(
              `Error fetching data from API: ${config.apiurl}`,
              error
            );
          },
        });
      }
    },
    // 处理清除输入
    handleClear(index) {
      this.$set(this.localInputConfigs[index], "selectedValue", "");
      console.log(
        "已清空选择，索引:",
        index,
        "函数名:",
        this.localInputConfigs[index].functionName
      );
    },
    // 处理选择变化
    onChange(e) {
      console.log("选择已改变", e);
    },
    // 确认选择
    confirm(e) {
      const selectedLabel = e.value[0];
      const currentConfig = this.localInputConfigs[this.currentInputIndex];
      const selectedItem = currentConfig.data.find(
        (item) => item.label === selectedLabel
      );
      this.$set(currentConfig, "selectedValue", selectedLabel);
      this.show = false;
      console.log(
        "已选择:",
        selectedLabel,
        "函数名:",
        currentConfig.functionName,
        "完整数据:",
        selectedItem
      );

      // 修改这里，将 functionName 也包含在发出的事件数据中
      this.$emit("input-change", {
        index: this.currentInputIndex,
        value: selectedItem,
        functionName: currentConfig.functionName,
      });

      // 输出传递的数据到控制台
      console.log("传递到后台的数据:", { value: selectedItem.value });

      // 检查 houtaiurl 是否存在
      if (currentConfig.houtaiurl) {
        const url = currentConfig.houtaiurl;
        uni.request({
          url: url, // 使用传递的 houtaiurl
          method: "POST",
          data: {
            value: selectedItem.value, // 传递选中的 value
          },
          success: (response) => {
            console.log("数据已成功发送到后台:", response);
          },
          fail: (error) => {
            console.error("发送数据到后台时出错:", error);
          },
        });
      } else {
        console.log("houtaiurl 未定义，跳过发送数据到后台");
      }
    },
    // 取消选择
    cancelPicker() {
      this.show = false;
      console.log("选择已取消");
    },
    // 获取嵌套对象的值
    getNestedValue(obj, path) {
      return path.split(".").reduce((acc, part) => acc && acc[part], obj);
    },
  },
};
</script>

<style lang="scss" scoped>
// 容器样式
.dynamic-inputs-container {
  width: 100%;
  box-sizing: border-box;
}

// 每个选择包装器的样式
// .select-wrapper {
//   margin-bottom: 20rpx;
// }

// 添加 arrow-icon-groud 样式
.arrow-icon-groud {
  position: relative;
  flex: 1;

  ::v-deep .u-icon {
    position: absolute !important;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
// ::v-deep .custom-input {
//   background-color: #f5f6fc !important;
//   width: 100% !important;
//   height: 44px !important;
//   border-radius: 5px !important;
//   padding: 10px !important;
//   box-sizing: border-box !important;
//   border: 1px solid #f5f6fc !important;
//   font-size: 16px !important;
// }
</style>
